import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'

import cs from 'classnames'
import moment from 'moment'
import qs from 'qs'
import _ from 'lodash'

import QRcode from 'qrcode'

import {
  Spin,
  Row,
  Col,
} from 'antd'
import { fail } from 'utils/toast'
import Empty from 'component/empty'
import Modal from 'component/modal'
import Card from 'component/card'
import PullToRefresh from 'component/pullToRefresh'
import HeaderLayout from 'layout/header'

import { formatMoney } from 'config/money'
import { formatTitle } from 'config/title'
import { timeFormat } from 'config/time'
import { encryptPhone, encryptIdcard } from 'config/encrypt'

import { getLockHouse } from 'model/user'

import style from './index.less'

const { HouseCard } = Card

@connect(state => ({
  user: state.user,
  building: state.building,
}), {
  getLockHouse
})
export default class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      qrcode: '',
      visibleQrcode: false
    }
  }

  componentDidMount () {
    this.getLockHouse(qs.parse(this.props.location.search.replace(/^\?/g, '')).refresh)
  }

  getLockHouse = (isRefresh) => {
    const {
      user: {
        phone
      },
      building: {
        propertyId,
        housePreiodId
      }
    } = this.props

    this.props.getLockHouse({
      phone,
      propertyId,
      housePreiodId
    }, isRefresh)
  }

  /**
   * [点击二维码弹出二维码模态框]
   * @param  {String} houseOrderId [房源订单id]
   * @param  {event} e
   * @return {void}
   */
  handleQRcodeHandler = (houseOrderId, e) => {
    if (!houseOrderId) return

    QRcode.toDataURL(houseOrderId + '&ypf', {
      margin: 0,
      width: 223 * 3
    }, (err, url) => {
      if (err) {
        fail(err)

        return
      }

      this.setState({
        qrcode: url,
        visibleQrcode: true
      })
    })
  }

  /**
   * [点击去支付跳转到支付页面]
   * @param  {Object} data [房源详情, 参照user/lockHouse注释]
   * @return {void}
   */
  handlePay = (data) => {
    // console.log(qs.stringify(data))
    this.props.history.push(`/pay?${ qs.stringify(data) }`)
  }

  render () {
    const {
      visibleQrcode,
      qrcode
    } = this.state

    const {
      building: {
        propertyName,
        manageEndDate
      },
      user: {
        getLockHouseLoading,
        getLockHouseRefreshing,
        getLockHouseInit,
        getLockHouseMsg,

        lockHouse
      }
    } = this.props

    let mTime = moment(manageEndDate)

    let renderChildren = null

    if (getLockHouseLoading && !getLockHouseInit) {
      renderChildren = <div className = 'loading-wrap'><Spin /></div>
    } else if (getLockHouseMsg) {
      renderChildren = (
        <PullToRefresh
          refreshing = { getLockHouseRefreshing }

          onRefresh = { () => this.getLockHouse(true) }
        >
          <Empty type = 'network' text = { getLockHouseMsg } />
        </PullToRefresh>
      )
    } else if (!lockHouse.length) {
      renderChildren = (
        <PullToRefresh
          refreshing = { getLockHouseRefreshing }

          onRefresh = { () => this.getLockHouse(true) }
        >
          <Empty text = '没有锁定房源数据' />
        </PullToRefresh>
      )
    } else {
      renderChildren = (
        <PullToRefresh
          refreshing = { getLockHouseRefreshing }

          onRefresh = { () => this.getLockHouse(true) }
        >
          {
            lockHouse.map((v, i) => {
              return (
                <HouseCard
                  propertyName = { propertyName }
                  onQRCodeClick = { () => this.handleQRcodeHandler(v.houseOrderId) }
                  onPayClick = { () => this.handlePay(v) }

                  { ...v }

                  key = { i }
                />
              )
            })
          }
          <div className = { style['tip'] }>
            <div>请在规定时间内前往售楼处办理认购， 有任何疑问请致电售楼处或您的置业顾问</div>
          </div>
        </PullToRefresh>
      )
    }

    return (
      <Fragment>
        <HeaderLayout
          title = '我的房源'

          flex
        >
          { renderChildren }
        </HeaderLayout>
        <Modal
          visible = { visibleQrcode }
          onCancel = { () => this.setState({ visibleQrcode: false }) }
        >
          <div className = { style['qrcode'] }>
            <img src = { qrcode } />
            <p>请向售楼处工作人员<br />出示付款二维码</p>
          </div>
        </Modal>
      </Fragment>
    )
  }
}
